<template>
  <div id="archives" class="indexDiv m-padded-tb-large" style="">
    <!--顶部图片-->
    <div style="margin-top: -30px">
      <!--页面首图-->
      <div class="blog_first_picture">
        <img src="../../assets/img/archives.jpg" alt="标签首图" />
      </div>
    </div>

    <!--页面首图上的文字-->
    <div style="margin-top: -280px">
      <h2 style="font-family: STSong; font-size: 45px; font-weight: 900; color: #ffffff;" align="center" >归档</h2>
      <div class="ui container" align="center" style="margin-top: 20px">
        <div class="ui horizontal link list" align="center">
          <div class="item">
            <div class="ui orange basic label" style="font-size: 15px">{{ archiveBlogs.blogCount }}篇</div>
          </div>
        </div>
      </div>
    </div>

    <div style="margin-top: 180px; margin-bottom: 60px;padding: 0 420px;">
      <!-- 当年博文 -->
      <div style="margin-top: 40px" v-for="(archiveBlog, index) in archiveBlogs.archiveBlogs" :key="index">
        <h1 style="color: rgb(244, 113, 28); text-align: center; height: 100%;">{{ index }}</h1>
        <div class="a-menu-border">
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#f5f5c1"
            text-color="#111"
            active-text-color="#00B5AD">
            <el-menu-item-group>
              <el-menu-item :index="itemIndex" v-for="(blog, itemIndex) in archiveBlog" :key="itemIndex" @click="toBlogInfo(blog.id)">
                <i class="el-icon-document" style="color: #1abc9c"></i>{{ blog.title }}
                <div class="ui teal basic left pointing label m-padded-mini " >{{ blog.updateTime | dateFormat('M月DD') }}</div>
                <div class="ui orange basic left pointing label m-padded-mini " style="margin-left: 680px">{{ blog.flag }}</div>
              </el-menu-item>
            </el-menu-item-group>
          </el-menu>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "Archives",
  data() {
    return {
      archiveBlogs: []
    };
  },
  methods:{
    // 博客归档获取
    getArchiveBlogs(){
      this.$http.get("http://localhost:8088/show/blogs/archive").then(res => {
        if (res.data.code == 0) { // 成功
          this.archiveBlogs = res.data.data;
          console.log(this.archiveBlogs);
        }
      });
    },
    // 跳转至博客详情页面
    toBlogInfo(id){
      let routeData = this.$router.resolve({ // 路由跳转并传参
        name:'blog',
        query:{
          id:id //博客id
        },
      });
      window.open(routeData.href, '_blank');
    },
  },
  created() {
    this.getArchiveBlogs();
  }
}


</script>

<style scoped>
#archives{

}

.el-menu-item{
  border-bottom: 1px solid #bbbbbb;
}

.a-menu-border{
  border: 1px solid #bbbbbb;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  width:90%;
  margin: 0 auto;
}
</style>
